<template>
  <div class="personalInfo">
    <a style="font-size: 14px;">个人信息</a>
    <table style="width: 100%;margin-top: 15px;" class="personalTable" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td>姓名</td>
        <td>{{reform.displayname}}</td>
        <td><i class="el-icon-edit"></i>
          <el-button type="primary" size="mini" @click="editPassword">修改密码</el-button>
        </td>
      </tr>
      <tr>
        <td>账号</td>
        <td>{{reform.account}}</td>
        <td></td>
      </tr>
      <tr>
        <td>身份证号</td>
        <td>{{reform.sid}}</td>
        <td></td>
      </tr>
      <tr>
        <td>性别</td>
        <td>{{reform.sex}}</td>
        <td></td>
      </tr>
      <tr>
        <td>组织机构名称</td>
        <td>{{reform.orgname}}</td>
        <td></td>
      </tr>
      <tr>
        <td>注册时间</td>
        <td>{{reform.tegtime}}</td>
        <td></td>
      </tr>
      <tr>
        <td>描述</td>
        <td>{{reform.description}}</td>
        <td></td>
      </tr>
      <tr>
        <td>邮件</td>
        <td v-if="!emailShow">{{reform.email}}</td>
        <td v-if="emailShow">
          <el-input v-model="email" style="width: 40%"></el-input>
        </td>
        <td>
          <el-button v-if="!emailShow" type="primary" size="mini" @click="editEmailEvent(reform.email)">编辑</el-button>
        </td>
      </tr>
      <tr>
        <td>手机号</td>
        <td v-if="!phoneShow">{{reform.phone}}</td>
        <td v-if="phoneShow">
          <el-input v-model="phone" style="width: 40%"></el-input>
        </td>
        <td>
          <el-button v-if="!phoneShow" type="primary" size="mini" @click="editPhoneEvent(reform.phone)">编辑</el-button>
        </td>

      </tr>
    </table>
    <div style="text-align: center;margin:40px 0">
      <el-button type="primary" @click="submitEvent">提交修改</el-button>
      <el-button type="primary" @click="qxBjEvent">取消修改</el-button>
    </div>
    <div style="margin: 20px 0 60px 0" v-if="this.roleType !== 0">
      <div style="color: #FF0000;">
        <i class="el-icon-warning"></i>
        <span>用户权限</span>
      </div>
      <ul class="box" ref="ul_sty">
        <li v-for=" (item,index) in roleTitle" @click="liEvent(item,index)"
            :style="item.id === idTitle ? 'color:#3194B9;border-color:#3194B9':''">{{item.resultName}}
        </li>
      </ul>

      <table style="width: 100%;margin: 0 015px 0;" class="personalTables" cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td>系统管理权限</td>
          <td colspan="11">
            <span class="span" v-for="item in dirRightList">{{item.name}}</span>
            <span class="span1" v-if="!dirRightList.length">{{'暂无数据'}}</span>
          </td>
        </tr>
        <tr>
          <td>项目信息报送</td>
          <td colspan="11">
            <span class="span" v-for="item in Box1">{{item.name}}</span>
            <span class="span1" v-if="!Box1.length">{{'暂无数据'}}</span>
          </td>
        </tr>
        <tr>
          <td>设计方案权限</td>
          <span class="span" v-for="item in Box2">{{item.name}}</span>
          <span class="span1" v-if="!Box2.length">{{'暂无数据'}}</span>
        </tr>
        <tr>
          <td>施工许可权限</td>
          <span class="span" v-for="item in Box3">{{item.name}}</span>
          <span class="span1" v-if="!Box3.length">{{'暂无数据'}}</span>
        </tr>
        <tr>
          <td>竣工验收权限</td>
          <span class="span" v-for="item in Box4">{{item.name}}</span>
          <span class="span1" v-if="!Box4.length">{{'暂无数据'}}</span>
        </tr>
        <tr>
          <td>咨询服务权限</td>
          <span class="span" v-for="item in Box5">{{item.name}}</span>
          <span class="span1" v-if="!Box5.length">{{'暂无数据'}}</span>
        </tr>
        <tr>
          <td>掘占路等咨询</td>
          <span class="span" v-for="item in Box6">{{item.name}}</span>
          <span class="span1" v-if="!Box6.length">{{'暂无数据'}}</span>
        </tr>
        <tr>
          <td>竣工验收提前查看</td>
          <span class="span" v-for="item in Box7">{{item.name}}</span>
          <span class="span1" v-if="!Box7.length">{{'暂无数据'}}</span>
        </tr>
        <tr>
          <td>事中事后监管权限</td>
          <span class="span" v-for="item in Box8">{{item.name}}</span>
          <span class="span1" v-if="!Box8.length">{{'暂无数据'}}</span>
        </tr>
        <tr>
          <td>掘占路等许可权限</td>
          <span class="span" v-for="item in Box9">{{item.name}}</span>
          <span class="span1" v-if="!Box9.length">{{'暂无数据'}}</span>
        </tr>
      </table>
    </div>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="30%"
      style="text-align: center;"
      :before-close="handleClose"
      :modal-append-to-body="false">
      <el-form :model="passwordForm" :rules="passwordFormRules" ref="passwordFormRules" label-width="100px">
        <el-form-item label="原密码:" prop="oldpass">
          <el-input v-model="passwordForm.oldpass" type="password" placeholder="请输入原密码"></el-input>
        </el-form-item>
        <p style="text-align: left;font-size: 14px;margin-left: 60px;padding: 0 10px;color: red;">
          请输入6位数或以上的密码（必须包含大写、小写字母和数字的组合）</p>
        <el-form-item label="新密码:" prop="newpass">
          <el-input v-model="passwordForm.newpass" @blur="newPassblurEvent(passwordForm.newpass)" type="password"
                    placeholder="请输入新密码"></el-input>
          <span class="ts_span" v-if="newPassTs">密码格式不正确</span>
        </el-form-item>
        <el-form-item label="确认新密码:" prop="">
          <el-input v-model="passwordForm.confirmPass" type="password" placeholder="请再次输入新密码"
                    @blur="oldPassblurEvent()"></el-input>
          <span class="ts_span" v-if="oldPassTs">两次密码不匹配，请重新输入</span>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="changePassword">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
  import {$aos} from "../../../store/state";
  import {http} from "../../../assets/commonjs/axios";
  import {mmyzT} from "../../../assets/commonjs/utils";

  export default {
    name: "userInfo",
    data() {
      return {
        oldPassTs: false,
        newPassTs: false,
        passwordForm: {
          oldpass: '',
          newpass: '',
          confirmPass: '',
        },
        passwordFormRules: {
          oldpass: [
            {required: true, message: '请填写原密码', trigger: 'blur'}
          ],
          newpass: [
            {required: true, message: '请填写新密码', trigger: 'blur'}
          ],

        },
        dialogVisible: false,
        idTitle: '',
        roleType: '',
        orgname: '',
        time: '',
        emailShow: false,
        phoneShow: false,
        reform: {},
        email: '',
        phone: '',
        roleList: [],
        Box1: [],
        Box2: [],
        Box3: [],
        Box4: [],
        Box5: [],
        Box6: [],
        Box7: [],
        Box8: [],
        Box9: [],
        dirRightList: [],
        roleArr: [],
        roleArr2: [],
        roleTitle: [],
        indexTitle: '',
      }
    },
    created() {
      $aos.getItem('roleType').then(res => {
        this.roleType = res;
      })
      $aos.getItem('loginData').then(res => {
        this.roleArr = res.userRoles || [];
        this.orgname = res.org.orgname;
        this.time = res.role.createTime;

        this.idTitle = res.role.id;
        this.roleEvent();
        $aos.getItem('userInfo').then(res => {
          this.reform = res;
          this.reform.orgname = this.orgname
          this.reform.tegtime = this.time
          let date = new Date(this.time);
          this.reform.tegtime = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes()}`;
        })
      })
    },
    mounted() {
      $aos.getItem('loginData').then(res => {
        this.roleArr2 = res.userRoles || [];
        this.roleMevent();
      })
    },
    methods: {
      editPassword(){
        this.dialogVisible=true
        this.passwordForm = {
          oldpass: '',
          newpass: '',
          confirmPass: '',
        }
      },

      //旧密码与新密码验证是否一致
      oldPassblurEvent() {
        if (this.passwordForm.newpass === this.passwordForm.confirmPass) {
          this.oldPassTs = false;
        } else {
          this.oldPassTs = true;
        }
      },
      //新密码验证
      newPassblurEvent(val) {
        if (val) {
          let yzjg = mmyzT(val);
          if (yzjg) {
            this.newPassTs = false;
          } else {
            this.newPassTs = true;
          }
        } else {
          this.newPassTs = false;
        }
      },
      changePassword() {
        if (this.passwordForm.oldpass && this.passwordForm.newpass && !this.oldPassTs) {
          http('post', 'permission/reset_password', {
            oldPassword: this.passwordForm.oldpass,
            newPassword: this.passwordForm.newpass,
          }).then(res => {
            if (res.data.success) {
              let duty = res.data.data.duty;
              $aos.setItem("duty", duty);
              this.dialogVisible = false;
              this.$message({message: res.data.msg, type: 'success'});
            } else {
              this.$message({message: res.data.msg, type: 'warning'});
            }
          })
        }
      },
      handleClose(done) {
        done()
      },
      editEmailEvent() {
        this.emailShow = true;
        this.email = this.reform.email
      },
      editPhoneEvent() {
        this.phoneShow = true;
        this.phone = this.reform.phone
      },
      submitEvent() {
        if ((this.email && (this.email !== this.reform.email)) || (this.phone && (this.phone !== this.reform.phone))) {
          http('post', 'permission/edit_user', {
            user: {
              email: this.email,
              phone: this.phone
            }
          }).then(res => {
            if (res.data.success) {
              let info = res.data.data
              this.reform = info;
              this.reform.orgname = this.orgname;
              this.reform.tegtime = this.time
              let date = new Date(this.time);
              this.reform.tegtime = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes()}`;
              $aos.setItem("userInfo", info);
              this.$message({message: res.data.msg, type: 'success'});
            }else{
              this.$message({message: res.data.msg, type: 'warning'});
            }
            this.emailShow = false;
            this.phoneShow = false;
          })
        }
      },
      qxBjEvent(){
        this.emailShow = false;
        this.phoneShow = false;
      },

      roleEvent() {
        this.roleArr.forEach(item => {
          this.roleTitle.push(item)
        })
      },


      roleMevent() {
        this.roleArr2.forEach((item, index) => {
          if (item.id === this.idTitle) {
            this.indexTitle = index;
            this.qxEvent(item.id)
          }
        })
      },

      liEvent(item, index) {
        this.$refs.ul_sty.childNodes[parseInt(this.indexTitle)].style.borderColor = 'rgb(223 238 244)';
        this.$refs.ul_sty.childNodes[parseInt(this.indexTitle)].style.color = 'black';
        this.indexTitle = index.toString();
        this.$refs.ul_sty.childNodes[index].style.borderColor = '#3194B9';
        this.$refs.ul_sty.childNodes[index].style.color = '#3194B9';
        this.qxEvent(item.id)
      },

      //查询权限事件
      qxEvent(id) {
        http('post', 'permission/get_role_detail', {
          urId: id
        }).then(res => {
          if (res.data.success) {
            let info1 = res.data.data.org
            let info2 = res.data.data.role;
            if (info2.opeRightList) {
              info2.opeRightList.forEach((item) => {
                if (item.type === 1) {
                  this.Box1.push(item)
                } else if (item.type === 2) {
                  this.Box2.push(item)
                } else if (item.type === 3) {
                  this.Box3.push(item)
                } else if (item.type === 4) {
                  this.Box4.push(item)
                } else if (item.type === 5) {
                  this.Box5.push(item)
                } else if (item.type === 6) {
                  this.Box6.push(item)
                } else if (item.type === 7) {
                  this.Box7.push(item)
                } else if (item.type === 8) {
                  this.Box8.push(item)
                } else if (item.type === 9) {
                  this.Box9.push(item)
                }
              })
            } else {
              this.Box1 = [];
              this.Box2 = [];
              this.Box3 = [];
              this.Box4 = [];
              this.Box5 = [];
              this.Box6 = [];
              this.Box7 = [];
              this.Box8 = [];
              this.Box9 = [];
            }
            if (info2.dirRightList) {
              this.dirRightList = info2.dirRightList
            } else {
              this.dirRightList = []
            }
          } else {
            this.$message({message: res.data.msg, type: 'warning'});
          }
        })
      }

    }
  }
</script>

<style scoped>
  .personalInfo {
    box-shadow: 0 0 3px #ccc;
    padding: 20px;
    background: #fff;
    box-sizing: padding-box;
  }

  .personalTable > tr {
    transition: background-color .2s;
  }

  .personalTable > tr > td {
    height: 40px;
    box-sizing: border-box;
    border-top: 1px solid #00000017;
    border-left: 1px solid #00000017;
    word-break: break-all;
    padding: 0 20px;
    font-size: 14px;
    text-align: left;
  }

  .personalTable > tr:hover {
    background: #eeeeee;
  }

  .personalTable > tr:last-child > td {
    border-bottom: 1px solid #00000017;
  }

  .personalTable > tr > td:last-child {
    border-right: 1px solid #00000017;
  }

  .personalTable > tr > td:nth-child(1) {
    width: 150px;
  }

  .personalTable > tr > td:nth-child(3) {
    width: 150px;
  }

  .personalTables tr td {
    font-size: 14px;
    width: 200px;
  }

  .personalTables tr td:nth-child(1) {
    text-align: center;
  }

  .personalTables tr:nth-child(odd) {
    background: #eeeeee;
    height: 50px;
    line-height: 50px;
  }

  .personalTables tr:nth-child(even) {
    background: white;
    height: 50px;
    line-height: 50px;
  }

  span.ts_span {
    padding: 0;
    margin: 0;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: 100%;
    color: red;
    cursor: default;
    text-align: left;
    font-size: 12px;
  }

  span.span {
    display: inline-block;
    min-width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background: white;
    margin: 0 10px;
  }

  span.span1 {
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 2px;
    margin: 0 10px;
    color: #999;
  }

  ul li {
    list-style: none;
  }

  .box {
    overflow: hidden;
    padding: 20px 0;
  }

  .box > li {
    cursor: pointer;
    float: left;
    padding: 5px 15px;
    margin: 0 10px 10px;
    border: 1px solid rgb(223 238 244);
    border-radius: 20px;
  }
</style>
